@using OrchardCore.Mvc.Utilities
@using OrchardCore.ContentManagement.Metadata.Settings;

@model AddFieldViewModel

@{
    var returnUrl = ViewData["returnUrl"]?.ToString();
}

<h1>@RenderTitleSegments(T["Add New Field To \"{0}\"", Model.Part.DisplayName()])</h1>

<form asp-action="AddFieldTo" asp-route-returnUrl="@ViewData["returnUrl"]">
    @Html.ValidationSummary()
    <div class="form-group">
        <div class="row col-md">
            <label for="DisplayName">@T["Display Name"]</label>
            <input asp-for="DisplayName" class="form-control" autofocus />
            <span class="hint">@T["Name of the field as it will be displayed in screens."]</span>
        </div>
    </div>

    <div class="form-group">
        <div class="row col-sm">
            <label for="Name">@T["Technical Name"]</label>
            <input asp-for="Name" class="form-control" />
            <span class="hint">@T["Technical name of the field."]</span>
        </div>
    </div>

    <div class="form-group">
        <label for="DisplayName">@T["Field Type"]</label>
        <ul class="list-group w-md-50">
            @for (var i = 0; i < Model.Fields.Count; i++)
            {
                <li class="list-group-item">
                    <div class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" asp-for="FieldTypeName" id="@Html.IdFor(m => m.Fields[i])" value="@Model.Fields[i]" checked="@(i == 0)">
                        <label class="custom-control-label" asp-for="Fields[i]">@Model.Fields[i].CamelFriendly()</label>
                    </div>
                </li>
            }
        </ul>
    </div>

    <div class="form-group">
        <button class="btn btn-primary" type="submit">@T["Save"]</button>
        @if (Url.IsLocalUrl(returnUrl))
        {
            <a class="btn btn-secondary" href="@returnUrl">@T["Cancel"]</a>
        }
    </div>
</form>

<script at="Foot" type="text/javascript">
//<![CDATA[
    $(function(){
        var $name = $("#@Html.IdFor(m => m.Name)");
        var $displayName = $("#@Html.IdFor(m => m.DisplayName)");

        var nameAltered;
        $name.keypress(function() {
            nameAltered = true;
        });

        var compute = function() {
            // stop processing automatically if altered by the user
            if(nameAltered) {
                return true;
            }

            $name.val(getTechnicalName($displayName.val()));
        };

        $displayName.keyup(compute);
        $displayName.blur(compute);
    })
//]]>
</script>
